
<template>
  <p>这是详细页面</p>
<!--  插值-->
  <p>{{msg}}</p>
  <p v-text="count"></p>
  <p >父组件的值为:{{count}}</p>
  <p>子传父的值:{{childCount}}</p>

<!--  方法-->
  <button @click="addCount">增加</button>
<!--  v-model-->
  <input placeholder="请输入" v-model="text">
  <p v-text="text"></p>
<!--  遍历 v-for-->
  <p v-for="(name,index) in namelist" :key="index">姓名:{{name}}</p>
<!--  跳转-->
  <button @click="linkAbout">跳转到about</button>
  <p>仓库数据:{{indexStore.data}}</p>
<!--  <ChildView message="来自父组件的数据"></ChildView>-->
  <ChildView :message="count" @child="childData"></ChildView>

</template>

<style >

</style>
<script >
import {useIndexStore} from "@/store/index";
import {mapStores} from "pinia";
import {defineComponent} from 'vue'
import  ChildView from './ChildView.vue'
export default defineComponent({
  name: "DetailView",
  components:{
    ChildView
  },
  data(){
    return{
      msg : "hello!",
      count : 0,
      childCount : 0,
      text: '',
      namelist:['张三','李四','王五'],
      data : 0
    }

  },
  methods:{
    addCount(){
      this.count++
    },
    linkAbout(){
      // 跳转
      this.$router.push('/about')
    },
    childData(data){
      this.childCount = data;
    }
  },

  computed:{
    ...mapStores(useIndexStore),
  }

})
</script>